<template>
  <div class="goods-item"     @click="$commonOpenGoods(props.detail)">
    <img src="../assets/imgs/goods/pig1.png" alt="" />
    <div class="txt-detail line2">
      {{ props.detail.title }}
    </div>
  </div>
</template>

<script lang="ts" setup>

interface Props {
  detail: Object
}
useHead({
  title: "详情",
  meta: [
    { name: "keywords", content: "二木素材网" },
    { name: "description", content: "二木素材网" },
  ],
});

const emit = defineEmits<{
  (e: 'onClickItem', val: number|string): void
}>()

const props = withDefaults(defineProps<Props>(), {
  detail: () => {
    return {}
  },
})

// const handleClickItem = () => {
//   emit('onClickItem', props.detail.id)
// }
</script>

<style lang="scss" scoped>
.goods-item {
  width: 100%;
  height: 100%;
  padding: 6px;
  background-color: #ccc;
  position: relative;
  img {
    width: 100%;
  }
  .txt-detail {
    position: absolute;
    margin: 6px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background-color: rgba(235, 232, 232, 1);
    font-size: 12px;
    line-height: 24px;
  }
  //两行或多行显示
  .line2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
  }
}
</style>
